<template>
  <el-dialog v-model="visible" title="优惠券领取详情" width="50%">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="ID">{{ detail?.id }}</el-descriptions-item>
      <el-descriptions-item label="用户">{{ detail?.user?.username }}</el-descriptions-item>
      <el-descriptions-item label="优惠券">{{ detail?.coupon?.name }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="statusTagType(detail!.status)">
          {{ statusText(detail!.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="领取时间">{{ detail?.created_at }}</el-descriptions-item>
      <el-descriptions-item label="使用时间">
        {{ detail?.used_at || "未使用" }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { type CouponReceiveType } from "@/api/coupon/receive";

const props = defineProps<{
  modelValue: boolean;
  detail: CouponReceiveType | null;
}>();

const emit = defineEmits(["update:modelValue"]);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

function statusText(status: string) {
  const map: Record<string, string> = {
    no_used: "未使用",
    used: "已使用",
    expired: "已过期",
  };
  return map[status] || status;
}

function statusTagType(status: string): any {
  const map: Record<string, string> = {
    no_used: "success",
    used: "",
    expired: "info",
  };
  return map[status] || "";
}
</script>
